<template>
  <div class="infobox">
    <h4 style="margin:0 0 10px 0">
      <span>信息管理</span>
    </h4>
    
    
    <div style="padding-left:20px">
      <el-form :model="ruleForm2"  :rules="rules2" ref="ruleForm2" label-width="80px" class="demo-ruleForm" >
        <el-form-item label="名称:" style="margin:0">
         <span>{{hostName}}</span>
        </el-form-item>
        <el-form-item label="账号:" style="margin-bottom:5px">
          <span>{{ruleForm2.account_name}}</span>
        </el-form-item>
        <el-form-item label="联系电话:" prop="tel">
          <el-input v-model="ruleForm2.tel" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="营业时间:" prop="business_time">
          <el-input v-model="ruleForm2.business_time" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-select v-model="ruleForm2.province"  @change="changeCity" filterable placeholder="选择省份" style="width:110px">
              <el-option v-for="item in ruleForm2.options1" :key="item.id" :label="item.areaname" :value="item.id" > </el-option>
            </el-select>
            <el-select v-model="ruleForm2.city" @change="changeArea" filterable placeholder="选择城市" style="width:110px">
              <el-option v-for="item in ruleForm2.options2" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
            <el-select v-model="ruleForm2.area" @change="changeVal" filterable placeholder="选择区" style="width:110px">
              <el-option v-for="item in ruleForm2.options3" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="具体地址:" prop="position">
          <el-input v-model="ruleForm2.position" @blur="getLng" style="width:90%"></el-input>
          <div>
            <span>{{address}}</span>
            <span v-if="okLng== 1" style="margin-left:20px;color:#67c23a">经纬度获取成功</span>
            <span v-else-if="okLng== 2" style="margin-left:20px;color:red">无法获取该得知的经纬度获取</span>
            <span v-else></span>
          </div>
        </el-form-item>
        
        <el-form-item label="Logo:" prop="odress" style="width:90%">
          <div>
            <el-row>
              <el-col :span="12">
                <el-upload 
                  class="avatar-uploaderInfo"
                  action="https://upload.qiniup.com/"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleOkLogo"
                  :data="postData">
                  <img v-if="ruleForm2.logo_url" :src="ruleForm2.logo_url" class="avatarInfo">
                  <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
                </el-upload>
               
              </el-col>
            </el-row>
          </div>
        </el-form-item>

        <el-form-item label="图片:" prop="odress">
          <div>
            <el-row>
              <el-col :span="24">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <li style="float:left" :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in fileList3" :key="index">
                    <img :src="item" alt="" class="el-upload-list__item-thumbnail">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="shouimg(item)"><i class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="deletImg(index)"><i class="el-icon-delete"></i></span>
                    </span>
                  </li>
                </ul>
                <el-upload  style="float:left"
                  action="https://upload.qiniup.com/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handleOkList"
                  :data="postData">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-col>
            </el-row>
            
          </div>
        </el-form-item>
        <el-form-item label="简介:" prop="odress">
          <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="ruleForm2.introduction" style="width:90%"></el-input>
          
        </el-form-item>
        
        <el-form-item style="margin-bottom:0px;">
            <div style="margin:-20px 0 40px 0;color:#ccc">信息提交后，牙记将1-2个工作日内完成审核</div>
            <el-button type="warning" @click="submitForm('ruleForm2',1)">保&nbsp;&nbsp;存</el-button>
            <el-button type="primary" @click="submitForm('ruleForm2',0)">提交审核</el-button>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <!-- <mapa v-show="showMap" :address="address" @mapLng="mapLng" ref="maps"></mapa> -->
    <!-- <bai-du></bai-du> -->
    <!-- <baidu v-show="showMap" :address="address" @mapLng="mapLng" ref="maps"></baidu> -->
    <div v-show="!showMap" id="XSDFXPage" class="XSDFXPage"></div>
  </div>
</template>

<script>
import axios from 'axios'
import Http from '@/Http/Http'
// import mapa from './Hositem/map'
// import baiDu from './Hositem/baiduMap'
// import baidu from './Hositem/baidu'


export default {
  props:['dataArtice'],
  components:{
    // mapa,
    // baiDu,
    // baidu
  },
  
  data() {
   
    var business_time = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入营业时间'));
      } else {
        callback();
      }
    };
    var tel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话号码不能为空'));
      } 
      if(!/^[0-9]*[-]?[0-9]*$/.test(value)){
        return callback(new Error('电话号码格式不正确'));
      }
      callback();
      
    };
    const position = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入具体地址'));
      } 
      callback();
      
    };

    return {
      postData:{
        token:'', //token
      },
      showMap:true,
      okLng:0,
      mapdata:{
        lat:'',
        lng:''
      },
      hostName:'',
      dialogVisible:false,
      dialogImageUrl:'',
      tokenimgUrl:'',
      address:'',
      fileList3:[],
      ruleForm2: {       
        options1:[],
        options2:[],
        options3:[],
        province:'',//省
        city:'',//市
        area:'',//区
        hospital_id:'',
        tel:'',
        account_name:'',
        logo_url:'', //logo地址
        business_time:'', //营业时间
        position:'',//具体地址
        introduction:'' //简介
      },
      
      rules2: {
        business_time: [
          { validator: business_time, trigger: 'blur' }
        ],
        tel: [
          { validator: tel, trigger: 'blur' }
        ],
        position:[{validator: position, trigger: 'blur'}]
      }
    };
  },
  created(){
    this.getToken()
    Http.getAreaList(0)
    .then( res => {
      this.ruleForm2.options1 = res.data.data;
    })
  },
   mounted() {
           
      // 百度地图API功能
      // 创建Map实例
      this.map = new BMap.Map("XSDFXPage",{enableMapClick:true});
      this.map.centerAndZoom("深圳",12);           
      this.map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
      this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

      this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
      this.map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
      this.map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

      this.localSearch = new BMap.LocalSearch(this.map);
      this.localSearch.enableAutoViewport(); //允许自动调节窗体大小
      
    //this.map.addEventListener("click", this.showInfo);
  },
  methods: {
    getToken() {
      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.tokenimgUrl = res.data.data.domain;

      })
      .catch( error => {
        this.$message.error('服务器请求失败')
        console.log(error)
      })
      Http.getHospitaInfo()
      .then( res => {
        this.ruleForm2.hospital_id = res.data.data.hospital_id
        this.ruleForm2.tel = res.data.data.tel;
        this.ruleForm2.introduction = res.data.data.introduction;
        this.ruleForm2.business_time = res.data.data.business_time;
        this.hostName = res.data.data.name;
        this.ruleForm2.position = res.data.data.position;
        this.ruleForm2.account_name = sessionStorage.getItem('userPass');
        this.ruleForm2.logo_url = res.data.data.logo_url;
        this.fileList3 = res.data.data.images;
        this.ruleForm2.province = res.data.data.province_id;
        
        if(res.data.data.province_id){
          this.changeCity(res.data.data.province_id,res.data.data.city_id)
        }
        if(res.data.data.city_id){
          this.changeArea(res.data.data.city_id,res.data.data.area_id)
        }
        
        //this.ruleForm2.area = res.data.data.area_id;
      })
      .catch( error => {
        //this.$router.push('/')
        console.log(error)
      })

      // Http.getAreaList(0)
      // .then( res => {
      //   this.ruleForm2.options1 = res.data.data;
      // })
    },

     changeCity(val,city=''){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.options2 = res.data.data;
          // this.ruleForm2.options3 = '';
          // this.ruleForm2.area = '';
          this.ruleForm2.city = city;
        })
    },
    changeArea(val,are=''){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.area = are;
          this.ruleForm2.options3 = res.data.data;
        })
    },
    changeVal(val){

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (isJPG || isPNG) {
        return true;
      } else {
          this.$message.error('上传图片格式不正确!');
        return false;
      }
    },
    handleOkLogo(responed) {
      console.log(responed,'响应信息')
      this.ruleForm2.logo_url = `http://${this.tokenimgUrl}/${responed.key}`;
      console.log('上传图片',this.ruleForm2.logo_url)
    },


     // 图片列表 方法  -------------------------------------------------------|||||
    handleOkList(responed,fill,filist) {
      this.fileList3.push(`http://${this.tokenimgUrl}/${responed.key}`) ;
      console.log(this.fileList3,'响应信息')
    },
     // 图片列表 方法  -------------------------------------------------------|||||

    shouimg(val) {
      this.dialogVisible = true;
      this.dialogImageUrl = val;
    },
    deletImg(index) {
      this.fileList3.splice(index,1)
      console.log(123)
    },
    getLng() {
      let a,b,c;
      this.ruleForm2.options1.forEach(item => {
        if(item.id == this.ruleForm2.province){
          a = item.areaname
        }
      })
      if(this.ruleForm2.options2){
         this.ruleForm2.options2.forEach(item => {
          if(item.id == this.ruleForm2.city){
            b = item.areaname
          }
        })
      }
      if(this.ruleForm2.options3){
        this.ruleForm2.options3.forEach(item => {
          if(item.id == this.ruleForm2.area){
            c = item.areaname
          }
        })
      }
      
      if(!a || !b || !c){
        this.$message.error('请选择省，市，区');
        return
      }
      this.address = `${a}${b}${c}${this.ruleForm2.position}`;
      this.searchByStationName()

    },
    submitForm(formName,val) {
      
      this.$refs[formName].validate( (valid) => {
        if (!valid) { this.$message.error('信息未填完整'); return}
        let txt = '';
        val? txt = '保存成功' : txt = '提交审核成功'
        const obj = {
          "name":this.hostName,
          "hospital_id":this.ruleForm2.hospital_id,
          "is_draft":val,
          "tel":this.ruleForm2.tel,
          "introduction":this.ruleForm2.introduction,
          "images":this.fileList3,
          "position":this.ruleForm2.position,
          "logo_url":this.ruleForm2.logo_url,
          "business_time":this.ruleForm2.business_time,
          "lng":this.mapdata.lng,
          "lat":this.mapdata.lat,
          "province_id": this.ruleForm2.province,
          "city_id": this.ruleForm2.city,
          "area_id": this.ruleForm2.area
        }
        // console.log(obj)
        Http.editHospitaInfo(obj)
        .then(res => {
          if ( res.data.code == 200){
            this.$message.success(txt);
            this.getToken()
          }
        })
      })
    },
    searchByStationName() {
      this.okLng = 0;    
      this.map.clearOverlays();//清空原来的标注
      var keyword = this.address;
      const _this = this;
      this.localSearch.setSearchCompleteCallback(function (searchResult) {
          
          var poi = searchResult.getPoi(0);
          
          if(!poi){
            _this.okLng = 2;
            return
          }
          _this.vala = poi.point.lng + "," + poi.point.lat;
          _this.mapdata.lng = poi.point.lng;
          _this.mapdata.lat = poi.point.lat;
          if(_this.mapdata.lng){
            _this.okLng = 1;
          } else {
            _this.okLng = 2;
          }
          // console.log(_this.mapdata)
          _this.map.centerAndZoom(poi.point, 13);
          var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
          _this.map.addOverlay(marker);
          var content = _this.aderss + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
          var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
          marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
          // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      });
      _this.localSearch.search(keyword);
    },
    mapLng(val){
      this.mapdata = val;
      console.log(this.mapdata)
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.infobox{
  width: 80%;
  background: #fff;
  padding:10px;
}
.avatar-uploaderInfo .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploaderInfo .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-iconInfo {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatarInfo {
    width: 178px;
    height: 178px;
    display: block;
  }
  .XSDFXPage{
      width: 400px;
      height: 500px;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
  }
</style>
